import React, { useEffect,useState } from 'react';
import { Row, Col, Select, Form, Button } from 'antd';
import FormItem from '../../../../components/FormItem';
import services from '../../../../services/api';
import storage from '../../../../utils/storage'
const { Option } = Select;

 function tempalteAddStrategy(props) {
  const [tempalteList, setTempalteList] = useState([]); // 模板数据
  useEffect(() => {
    getTempalteList();
  },[])
 // 获取全部模板列表
 function getTempalteList() {
    services.template.allTempalte().then(res => {
       if (!res.code) {
         setTempalteList(res.data)
       }
    });
 };
 // 模板新增提交
 function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err) {
        storage.templateToStrategyId = values.tempalte_id
        props.history.push(`/strategy/config/add?import=true`);
        props.closeModel && props.closeModel()
      };
    })
 };
 // 模板选择
 function handleChange(value) {};
 function tempalteSelectRender(parent) {
   return (<Select
     style={{ width: '100%' }}
     placeholder="请选择模板"
     onChange={handleChange}
     optionLabelProp="label"
     >
       { tempalteList.map(item => {
           return (<Option value={item.strategy_template_id} key={item.strategy_template_id} label={item.name}>
              <span>{item.name}</span>
           </Option>)
         })
       }
     </Select>)
 };
  const layout = {
    labelCol: {
      span: 6,
    },
    wrapperCol: {
      span: 18,
    },
  };

  const formItems = [
    {
      label: {
        label: '选择模板',
        ...layout,
      },
      name: 'tempalte_id',
      options: {
        // initialValue: ,
        rules: [
          { required: true, message: '请选择模板' }
        ],
      },
      component: tempalteSelectRender(),
    }
  ].filter(Boolean);

  return (
    <Form layout='horizontal' onSubmit={() => false}>
    <Row type='flex' gutter={20}>
      {formItems.map((item) => {
        return (
          <Col span={24} key={item.name}>
            <FormItem form={props.form} item={item} colNum={1} />
          </Col>
        );
      })}
       <div className='template-form-btn'>
          <Button type='primary' autoFocus={true} onClick={handleSubmit} className='login-form-button'>
             下一步
          </Button>
       </div>
    </Row>
  </Form>
  );
}
export default Form.create()(tempalteAddStrategy)
// export default Form.create()(tempalteAddStrategy);
